<template>
  <div class="ElSelectPupBox">
    <ElPupBox :data="r_pup" isBg>
      <div class="full" :class="{
        'm-8': !['User'].includes(type),
      }" v-if="r_pup.state">
        <component :is="typeComponentMap[type]" isSelect :isBatch="isBatch" @selectBtn="selectBtn"
          @selectBatchBtn="selectBatchBtn" :selectable="selectable" />
      </div>
      <template #btn>
        <el-button type="primary" @click="save_btn" :loading="r_pup.loading">确认</el-button>
      </template>
    </ElPupBox>
    <el-button type="primary" @click="openPup">{{ title }}</el-button>
  </div>
</template>
<script setup lang="ts">
const typeComponentMap = { Craft, User } as any;
import User from '@/views/personnel/personnelManage/index.vue'; //员工
import Craft from '@/views/system/craftConfig/index.vue'; //订单
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any;
    title?: string;
    type?: string;
    isSelect?: boolean; //是否单选
    isBatch?: boolean; //是否多选
    selectable?: Function; //返回值用来决定这一行的 CheckBox 是否可以勾选
  }>(),
  {
    title: '选择明细',
    type: 'Craft',
  },
);
const r_pup = reactive({
  state: false,
  loading: false,
  title: '弹窗标题',
  typeName: 3,
  width: 'auto',
  height: 'auto',
  batchList: [],
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'selectBtn', row: any): void;
}>();
const selectBtn = (row: any) => {
  emit('selectBtn', props.isBatch ? [row] : row);
  close_btn();
};
const selectBatchBtn = (rows: any[]) => {
  r_pup.batchList = rows as any;
};
const save_btn = () => {
  emit('selectBtn', r_pup.batchList);
  close_btn();
};
const close_btn = () => {
  r_pup.state = false;
};
const openPup = () => {
  r_pup.state = true;
  r_pup.title = props.title;
  r_pup.batchList = [];
};
</script>
<style scoped></style>
